<template>
	<view>
		<view class="my_bag">
			<u-icon name="rmb-circle" class="rmb_circle"></u-icon>
			<view class="my_money">我的零钱</view>
			<view class="the_money">¥{{myMoney.toFixed(2)}}</view>
			<u-button @click="Recharge()" type="success" class="btn_cz">充值</u-button>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="coupon" title="账单" @click="myOrders()"></u-cell-item>
				<u-cell-item icon="rmb" title="充值记录" @click="showPopup=true"></u-cell-item>
			</u-cell-group>
		</view>
		<!--ActionSheet 操作菜单-->
		<view>
			<u-action-sheet :list="list" @click="clickRecharge" v-model="show"></u-action-sheet>
		</view>

		<!--弹出层-->
		<u-popup v-model="showPopup">
			<view v-for="(item, index) in rechargeRecord" :key="index">
				<uni-card v-if="item.rechargeAmount>0" title="充值信息" style="font-weight: bold;">
					<view >
						<view style="color: #18BC37;">充值金额：{{item.rechargeAmount}}</view>
						<view style="color: #F0AD4E;">充值日期：{{item.rechargeTime}}</view>
					</view>
				</uni-card>
				<uni-card v-else title="消费明细" style="font-weight: bold;">
					<view>
						<view style="color: #18BC37;">消费金额：{{item.rechargeAmount}}</view>
						<view style="color: #F0AD4E;">消费日期：{{item.rechargeTime}}</view>
					</view>
				</uni-card>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				rechargeDate: new Date().toISOString(),
				list: [{
					text: '500',
					color: 'black',
					fontSize: 28,
					subText: '充值金额'
				}, {
					text: '1000',
					color: 'blue',
					fontSize: 28,
					subText: '充值金额'
				}, {
					text: '2000',
					color: 'green',
					fontSize: 28,
					subText: '充值金额'
				}],
				show: false,
				showPopup: false,
				rechargeRecord: "", //充值记录
				myMoney: 0
			}
		},
		onReady() {
			this.getRecharge();
		},
		computed: {
			getId() {
				return this.$store.getters.getId;
			}
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year;
			},
			getRecharge() {
				uni.request({
					url: '/api/recharge/selRecharge',
					data: {
						userId: this.getId
					},
					method: 'POST',
					success: (res) => {
						this.rechargeRecord = res.data //充值记录
						res.data = res.data.map((item, index) => {
							let rechargeAmount = item.rechargeAmount
							return rechargeAmount;
						})
						res.data.map((item) => {
							this.myMoney += item
						})
						this.$store.dispatch('rechargeAmount', this.myMoney);
						uni.setStorage("rechargeAmount", this.myMoney)
					}
				})
			},
			Recharge() {
				this.show = true
			},
			clickRecharge(index) {
				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				uni.request({
					url: '/api/recharge/addRechrage',
					data: {
						rechargeAmount: this.list[index].text,
						rechargeTime: this.dateFormat(this.rechargeDate),
						userId: this.getId
					},
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: '充值成功',
							icon: 'success'
						})
						this.myMoney = 0
						this.getRecharge();
					},
					fail: (err) => {
						uni.showToast({
							title: '充值失败，请检查网络',
							icon: 'error'
						})
					}
				})
			},
			myOrders() {
				uni.navigateTo({
					url: "/pages/order/orders"
				})
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: #EBEEF5;
	}
</style>
<style scoped>
	.my_bag {
		height: 380rpx;
		background-color: #08ACEE;
		text-align: center;
	}

	.rmb_circle {
		font-size: 90rpx;
		color: #FAC858;
		margin-top: 30rpx;
	}

	.my_money {
		font-weight: bold;
		margin-top: 10rpx;
		font-size: 20px;
	}

	.the_money {
		font-weight: bold;
		margin-top: 8rpx;
		font-size: 18px;
	}

	.btn_cz {
		margin-top: 35rpx;
		width: 200rpx;
	}
</style>
